<template>
    <div class="information f f-ac f-jc">
        <div class="information-body">
            <Sub-title label="游林芝" right-text="查看更多" @right="handleMore" />
            <Type-btn :list="typeList" :current="current" key-value="id" top="30" row-gap="30" @click="handleType" />
            <div class="f f-ac f-jb">
                <div class="f-1 body-right" v-if="newsList.length != 0" @click="handleDetail(newsList[0])">
                    <img :src="baseUrl+newsList[0].image" width="100%" height="100%" />
                    <div class="right-title line-1">{{ newsList[0].title || "-" }}</div>
                </div>
                <div class="body-left">
                    <div v-for="(i, k) in newsList" :key="k" class="item " :class="{ hover: i.hover }" v-if="k != 0"
                        @mouseover="i.hover = true" @mouseleave="i.hover = false" @click="handleDetail(i)">
                        <div class="item-left">
                            <div class="round">
                                <img :src="baseUrl+i.image" width="100%" height="100%" />
                            </div>
                        </div>
                        <div class="item-right f-1">
                            <div class="title line-1">{{ i.title || "-" }}</div>
                            <div class="content line-1" v-if="typeList[i.visit_category_id-1]">
                                区域：{{typeList[i.visit_category_id-1].name  || "-" }}</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    import {
        visitCategory,
        visitList
    } from "@/utils/home/index.js";

    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                current: "", //当前选中
                typeList: [],
                newsList: [],
            };
        },
        created() {
            this.getTypeList();

        },
        methods: {
            // 获取资讯列表
            getList() {
                this.loading = true;
                let that = this
                let data = {
                    visit_category_id: that.current,
                    title: '',
                    type: '',
                    page: 1,
                    limit: 5,
                    starttime: '',
                    type_time: '',
                    endtime: '',
                    recommend: 2
                }
                visitList(data).then((response) => {
                    if (response.code == 200) {
                        that.newsList = response.data.list.map(item => {
                            return {
                                ...item,
                                hover: false
                            }
                        })
                        that.loading = false;
                    }

                });
            },
            // 获取资讯分类
            getTypeList() {
                this.loading = true;
                let that = this
                visitCategory().then((response) => {
                    that.typeList = response.data
                    that.current = response.data[0].id
                    that.loading = false;
                    this.getList();
                });
            },
            // 查看更多
            handleMore() {
                this.$router.push({
                    path: "/art-gallery",
                });
            },
            // 拆分日期
            splitData(date, unit) {
                date = date ? date.trim().split(' ')[0] : ""
                if (unit == "day") {
                    return date.substr(8, 2);
                } else if (unit == "month") {
                    return date.substr(5, 2);
                } else if (unit == "year") {
                    return date.substr(0, 4);
                } else {
                    return date || "-";
                }
            },
            // 点击按钮
            handleType(i) {
                this.current = i.id;
                this.getList()
            },
            // 查看详情
            handleDetail(i) {
                this.$router.push({
                    path: "/art-gallery/details",
                    query: {
                        id: i.id,
                    },
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .information {
        width: 100%;
        height: 645px;
        /* background-color: #fff; */

        &-body {
            width: 1200px;
            height: 544px;

            .body-left {
                margin-left: 13px;
                width: 575px;
                display: flex;
                flex-wrap: wrap;

                .item {
                    width: 46%;
                    height: 206px;
                    background-color: #fff;
                    margin-bottom: 18px;
                    color: #313131;
                    margin: 0 10px 10px 0;

                    &-left {
                        height: 140px;

                        .round {
                            width: 100%;
                            height: 136px;
                            text-align: center;
                            margin: auto;
                            overflow: hidden;
                        }
                    }

                    &-right {
                        height: 60px;
                        padding-right: 20px;
                        box-sizing: border-box;

                        .title {
                            font-size: 16px;
                            font-weight: bold;
                            margin: 10px;
                        }

                        .content {
                            font-size: 14px;
                            margin: 10px;
                        }
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }

            .body-right {
                position: relative;
                height: 425px;
                cursor: pointer;

                .right-title {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    box-sizing: border-box;
                    height: 68px;
                    color: #fff;
                    padding: 0 20px;
                    line-height: 68px;
                    background-color: #00000080;
                }
            }
        }
    }

    .hover {
        /* color: #fff !important; */
        cursor: pointer;
        background-color: #68676780 !important;

        .round {
            border: 1px solid #fff !important;

            .day::after {
                background-color: #fff !important;
            }
        }
    }
</style>